import React,{Component} from "react";
import { Calendar, message } from 'antd';
import { Link } from 'react-router-dom';
import CityTables from "../containers/cityTables";
// import '../assets/stylesheets/searchBanner.css';

export default class Banner extends Component{
    constructor(props) {
        super(props)
        this.state = {
            goCitys:{},
            toCitys:{},
        }
    }

    componentDidMount(){
        let ul = document.getElementById("slider");
        let goDate = document.getElementById("goDate");
        let goinput = document.getElementById('goCity');
        let toinput = document.getElementById('toCity');
        let date = new Date(),
            year = date.getFullYear(),   //获取完整的年份(4位,1970-????)  
            month = date.getMonth() + 1,     //获取当前月份(0-11,0代表1月)  
            day = date.getDate(),
            ymd = "";
        if(month.toString().length === 1){ month = "0" + month; }
        if(day.toString().length === 1){ day = "0" + day; }
        console.log("初始的年月日", year, month , day);
        console.log("this.props", this.props);
        ymd = year + "-" + month + "-" +  day;
        goDate.value = ymd;
        goinput.value = "西安";
        toinput.value = "北京";
        goDate.setAttribute("readOnly","true");
        //给document绑定点击事件
        
        document.addEventListener("click",function(){
            console.log("点击到document了");
            let calendar = document.getElementById("calendar");
            let goBox = document.getElementById('go-city');
            let toBox = document.getElementById('to-city');
            calendar.style.display="none";
            goBox.style.display = "none";
            toBox.style.display = "none";
        });
    }
    //出发地
    getGoCityNames = (citys) =>{ this.setState({goCitys:citys}); }
    onGoCityFocus = () =>{
        console.log("onGoCityFocus");
        let goinput = document.getElementById('goCity');
        let goBox = document.getElementById('go-city');
        // let onGoCityBlurModal = document.getElementById("onGoCityBlurModal");
        goBox.style.display = "block";
        // onGoCityBlurModal.style.display = "block";
    }
    onGoCityInput = (e) =>{
        let goBox = document.getElementById('go-city');
        // let onGoCityBlurModal = document.getElementById("onGoCityBlurModal");
        goBox.style.display = "none";
        // onGoCityBlurModal.style.display = "none";
    }
    getGoCityName = (e) =>{
        // console.log("e.target.value",e.target.innerText);
        // console.log(".toString",e.target.toString());
        let goCity = document.getElementById("go-city");
        // let onGoCityBlurModal = document.getElementById("onGoCityBlurModal");
        let goinput = document.getElementById('goCity');
        goCity.style.display = "none";
        // onGoCityBlurModal.style.display = "none";
        goinput.value = e.target.innerText;
    }
    exchangeCity = () =>{
        let toinput = document.getElementById('toCity');
        let goinput = document.getElementById('goCity');
        let t = toinput.value;
        toinput.value = goinput.value;
        goinput.value = t;
    }
    //目的地
    getToCityNames = (citys) =>{ this.setState({toCitys:citys}); }
    onToCityFocus = () =>{
        console.log("onToCityFocus");
        let toinput = document.getElementById('toCity');
        let toBox = document.getElementById('to-city');
        // let onToCityBlurModal = document.getElementById("onToCityBlurModal");
        toBox.style.display = "block";
        // onToCityBlurModal.style.display = "block";
    }
    onToCityInput = (e) =>{
        let toBox = document.getElementById('to-city');
        // let onToCityBlurModal = document.getElementById("onToCityBlurModal");
        toBox.style.display = "none";
        // onToCityBlurModal.style.display = "none";
    }
    getToCityName = (e) =>{
        let goCity = document.getElementById("to-city");
        // let onToCityBlurModal = document.getElementById("onToCityBlurModal");
        let goinput = document.getElementById('toCity');
        goCity.style.display = "none";
        // onToCityBlurModal.style.display = "none";
        goinput.value = e.target.innerText;
    }

    //选择日期
    onCalendarSelect = (value) =>{
        console.log("运行了onCalendarSelect");
        let goDate = document.getElementById("goDate");
        let calendar = document.getElementById("calendar");
        // let onGoDateBlurModal = document.getElementById("onGoDateBlurModal");
        goDate.value = value.format('YYYY-MM-DD');
        calendar.style.display = "none";
        // onGoDateBlurModal.style.display = "none";
    }
    onDateFocus = () =>{
        console.log("运行onDateFocus");
        let calendar = document.getElementById("calendar");
        // let onGoDateBlurModal = document.getElementById("onGoDateBlurModal");
        calendar.style.display = "block";
        // onGoDateBlurModal.style.display = "block";
    }
    
    //儿童票婴儿票的
    onMouseOver = () =>{
        let babyTipsBox = document.getElementById("baby-tips-box");
        babyTipsBox.style.display = "block";
    }
    onMouseLeave = () =>{
        let babyTipsBox = document.getElementById("baby-tips-box");
        babyTipsBox.style.display = "none";
    }
    //查询,检查两个地点是否为空
    searchClick=()=>{
        let goCity = document.getElementById("goCity"),
            toCity= document.getElementById("toCity"),
            child = document.getElementById("child"),
            baby = document.getElementById("baby");
        if(goCity.value && toCity.value){
            let go = this.goCityIn(goCity.value),
                to = this.toCityIn(toCity.value);
            if(go && to){
                //输入的两个地点都存在，向后台发送所有数据
                message.success("查询成功"+"child:"+child.checked+"baby:"+baby.checked);
                console.log(' this.props.location',this, this.props, this.props.location);
                this.props.location.history.push('/searsh');
            }
            else if(go){
                message.error("到达地点不存在");
            }
            else{
                message.error("出发地点不存在");
            }
        }else if(toCity.value){
            message.error("请输入出发地点");
        }else{
            message.error("请输入到达地点");
        }
    }
    goCityIn = (city) =>{
        let goCitys = this.state.goCitys;
        let flag = false;
        for(let item in goCitys){
            if(goCitys[item].indexOf(city) !== -1){
                flag = true;
                break;
            }
        }
        return flag;
    }
    toCityIn = (city) =>{
        let toCitys = this.state.toCitys;
        let flag = false;
        for(let item in toCitys){
            if(toCitys[item].indexOf(city) !== -1){
                flag = true;
                break;
            }
        }
        return flag;
    }
    render(){
        return(
        <div className="banner">
            <div id="index-search">
                <div className="s-box-bg"></div>
                <div className="s-box">
                    <div className="s-c1">
                        <div className="s-left">
                            <input id="goCity" onFocus={this.onGoCityFocus} onBlur={this.onGoCityBlur} onInput={this.onGoCityInput}></input>
                            <div id="go-city" onClick={this.GoCityTablesClick}>
                                <CityTables getCityName={this.getGoCityName} getCityNames={this.getGoCityNames}></CityTables>
                            </div>
                        </div>
                        <div className="img-block" onClick={this.exchangeCity}><img src={require("../assets/images/change.png")} className="change-icon"></img></div>
                        <div className="s-right">
                            <input id="toCity" onFocus={this.onToCityFocus} onBlur={this.onToCityBlur} onInput={this.onToCityInput}></input>
                            <div id="to-city">
                                <CityTables getCityName={this.getToCityName} getCityNames={this.getToCityNames}></CityTables>
                            </div>
                        </div>
                    </div>
                    <div className="s-c2">
                        <div className="s-left">
                            <input id="goDate" onFocus={this.onDateFocus} onBlur={this.onDateBlur} ></input>
                            <div id="calendar">
                                <Calendar fullscreen={false} onSelect={this.onCalendarSelect} />
                            </div>
                        </div>
                        <div className="s-right">
                            <select>
                                <option data-selected="true">经济舱</option>
                                <option>商务舱</option>
                                <option>头等舱</option>
                            </select>
                        </div>
                    </div>
                    <div className="s-c3">
                        <input type="checkbox" id="child" value="child" onChange={this.handleChange}></input><span>带儿童</span>
                        <input type="checkbox" id="baby" value="baby" onChange={this.handleChange}></input><span>带婴儿</span>
                    </div>
                    <Link to='/search'><button onClick={this.searchClick}>查询</button></Link>
                </div>
            </div>
        </div>
        )
    }
    
}
